<template>
  <div id="detailsError">
    <div class="detailsTop">
      <h2 class="fleft">详情</h2>
      <!-- <button @click="$router.go(-1)" class="errorBtn">返回</button> -->
      <a-button class="fright" @click="$router.go(-1)">返回</a-button>
    </div>
        <a-card :bordered="true" type="inner" title="异常日志" class="cardWrap" >
          <a-row :gutter="24" class="errorRow">
            <a-col :span="3">
              用户名: 
            </a-col>
            <a-col :span="18" >
              <!-- username -->
              {{ errList.username }}
            </a-col>
          </a-row>
          <a-row :gutter="16" class="errorRow">
            <a-col :span="3" >
              操作方法: 
            </a-col>
            <a-col :span="18">
              {{ errList.method }}
            </a-col>
          </a-row>
          <a-row :gutter="16" class="errorRow">
            <a-col :span="3">
              操作描述: 
            </a-col>
            <a-col :span="18">
              {{ errList.description }}
            </a-col>
          </a-row>
          <a-row :gutter="16" class="errorRow">
            <a-col :span="3">
              请求IP: 
            </a-col>
            <a-col :span="18">
              {{ errList.requestIp }}
            </a-col>
          </a-row>
          <a-row :gutter="16" class="errorRow">
            <a-col :span="3">
              访问类型: 
            </a-col>
            <a-col :span="18">
              {{ errList.browser }}
            </a-col>
          </a-row>
          <a-row :gutter="16" class="errorRow">
            <a-col :span="3">
              创建时间: 
            </a-col>
            <a-col :span="18">
              {{ errList.createTime }}
            </a-col>
          </a-row>
          <a-row :gutter="16" class="errorRow">
            <a-col :span="3">
              查询时间: 
            </a-col>
            <a-col :span="18">
              {{ errList.time }}
            </a-col>
          </a-row>
          <a-row :gutter="16" class="exceRow">
            <a-col :span="3">
              异常: 
            </a-col>
            <a-col :span="23" class="errorCol">
              <pre>
                <code>
                  {{ errList.exceptionDetail }}
                </code>
              </pre>
            </a-col>
          </a-row>
        </a-card>
  </div>
</template>

<script>
import * as API from "../../api/error";

export default {
  name:"error",
  data() {
    return {
      errList: {
        username: "",
        method: "",
        description: "",
        requestIp: "",
        browser: "",
        createTime: "",
        time: ""
      }
    }
  },
  mounted(){
    this.getDetail()
  },
  methods:{
    getDetail(){
      let id = this.$route.query.id
      API.getlogDetail(id).then(res => {
        if (res.code === 200) {
          this.errList = res.data;
        }
        this.loading = false;
      });
    }
  }
}
</script>
<style lang="less" scoped>
#detailsError{
  .detailsTop{
    height: 50px;
    width: 100%;
    // .detailsPage{float: left;}
    // .errorBtn{float: right;}
  }
  
  .cardWrap{
    padding-bottom: 20px;
    .errorRow{
      padding-bottom: 20px;
    }
    .exceRow{
      .errorCol{
        max-height: 500px;
        width: 100%;
        overflow: auto;
      }
    }
  }
}
</style>